<!--  -->
<template>
  <div class="content-choseBox">
    <span v-for="(item, index) in choseData" :key="index" @click="handleClick(item)">{{ item }} </span>
  </div>
</template>
<script>
import cssAttribute from '@/components/Home/js/cssAttribute.js'
 export default {
   name: 'choseBox' ,
   props: {
    choseData: {
        type: Array,
        default: () => []
    },
    cssAttributeIndex: {
        type: Number,
        default: 0
    }
   },
   methods: {
    handleClick(data) {
        console.log(data,this.cssAttributeIndex)
        let cssAttributeItem = cssAttribute[this.cssAttributeIndex]
        if(cssAttributeItem.choseBoxValue != undefined){
            cssAttributeItem.choseBoxValue = data
        }else{
            cssAttributeItem.value = data
        }
        this.$emit('choseItem', cssAttributeItem,this.cssAttributeIndex,0,0)
    }
   }
 }
</script>
<style scoped lang="scss">
.content-choseBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
    span{
        display: inline-block;
        width: 100%;
        text-align: center;
        padding: 5px 20px;
        &:hover{
            background-color: #eee;
        }
    }
}
</style>